<template>
	<view class="messagePage myBackground">
		<view class="content">
			<scroll-view scroll-y class="h100p w100p">
				<view class="h100p w100p d-flex flex-column">
					<view class="pl15 pr15 boxSizing">
						<view class="d-flex a-center">
							<view class="title2 white">1号楼5层本月系统评分</view>
						</view>
						<view class="" style="height: 500rpx;width: 100%;">
							<echartsUniapp ref="echarts1" :option="dfEchartObj" canvasId="echarts1"></echartsUniapp>
						</view>
						<view class="d-flex-center position-relative" style="top: -100rpx;z-index: 999999;">
							<view class="btn fs13 d-flex-center">{{dfTime}}</view>
						</view>
					</view>
					<view class="satety_detail pl15 pr15 w100p boxSizing flex-1 pt15">
						<view class="d-flex a-center">
							<view class="line mr5"></view>
							<view class="title2">1号楼5层 扣分事项</view>
						</view>
						<view v-if="dfList.length > 0" class="mt15">
							<view class="satety_detail_item w100p p15 boxSizing mb15" v-for="(item,index) in dfList" :key="index">
								<view class="rowName fs16 font600">{{item.deviceName}}</view>
								<view class="my_flex_sb mt15">
									<view class="rowName">扣分类型:</view>
									<view class="rowValue font_red">{{item.pointType}}</view>
								</view>
								<view class="my_flex_sb mt15">
									<view class="rowName">扣分分数:</view>
									<view class="rowValue font_red">-{{item.point}}</view>
								</view>
								<view class="my_flex_sb mt15">
									<view class="rowName">扣分时间:</view>
									<view class="rowValue">{{item.pointTime}}</view>
								</view>
							</view>
						</view>
						<view v-else class="w100p d-flex-center" style="height: calc(100% - 60px);">
							<noValue></noValue>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import echartsUniapp from "@/components/echarts-uniapp/echarts-uniapp.vue"
	import {
		queryOneListSafeByNum,
		queryTwoListSafeByReport
	} from "@/api/dormBuilding/oneBuildFiveFloor.js"

	export default {
		components: {
			echartsUniapp
		},
		data() {
			return {
				timeout: [],

				dfEchartObj: {},
				dfTime: "",
				dfList: []
			};
		},
		mounted() {
			this.queryOneListSafeByNum()
			this.queryTwoListSafeByReport()

			// this.setupTimer()
		},
		methods: {
			// 设置定时器
			setupTimer() {
				let _this = this;
				_this.timeout[0] = setInterval(() => {
					_this.queryOneListSafeByNum()
					_this.queryTwoListSafeByReport()
				}, 15000);
			},
			// 清除定时器
			clearTimer() {
				let _this = this;
				if (_this.timeout.length > 0) {
					_this.timeout.forEach(item => {
						clearInterval(item);
					})
				}
			},

			async queryOneListSafeByNum() {
				await queryOneListSafeByNum().then(res => {
					let tempData = res.object || []
					let gaugeData = [{
						value: tempData.point == 0 ? 0 : tempData.point,
						detail: {
							valueAnimation: true,
							offsetCenter: ['0%', '5%']
						}
					}]
					let option = {
						series: [{
							type: 'gauge',
							
							pointer: {
								show: false
							},
							progress: {
								show: true,
								overlap: false,
								roundCap: true,
								clip: false,
								itemStyle: {
									borderWidth: 1,
									borderColor: '#427aff',
									color: '#427aff'
								}
							},
							axisLine: {
								roundCap: true,
								lineStyle: {
									width: 10
								}
							},
							splitLine: {
								show: false,
								distance: 0,
								length: 10
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false,
								distance: 50
							},
							data: gaugeData,
							title: {
								fontSize: 14
							},
							detail: {
								valueAnimation: true,
								width: '80%',
								lineHeight: 30,
								borderRadius: 8,
								offsetCenter: [0, '-5%'],
								fontSize: 88,
								color: '#ffffff',
								fontWeight: 'bolder',
								fontFamily: 'Din',
								formatter: '{value}',
							}
						}]
					};

					this.dfTime = tempData.createTime
					this.dfEchartObj = option
				})
			},
			async queryTwoListSafeByReport() {
				await queryTwoListSafeByReport().then(res => {
					this.dfList = res.object || []
				})
			},

			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import url("@/static/css/loadAndEnergy.css");
</style>